<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调试页面</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .log { background: #f5f5f5; padding: 10px; margin: 10px 0; border-radius: 5px; }
        .success { color: green; }
        .error { color: red; }
    </style>
</head>
<body>
    <h1>扩展程序调试页面</h1>
    <div id="status">
        <h2>状态检查</h2>
        <div id="checks"></div>
    </div>
    
    <script>
        const checks = document.getElementById('checks');
        
        function log(message, type = 'info') {
            const div = document.createElement('div');
            div.className = `log ${type}`;
            div.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
            checks.appendChild(div);
            console.log(`[${type.toUpperCase()}] ${message}`);
        }
        
        // 检查Chrome API可用性
        function checkChromeAPI() {
            log('检查Chrome API...');
            
            if (typeof chrome === 'undefined') {
                log('❌ Chrome API不可用', 'error');
                return false;
            }
            
            log('✅ Chrome API可用');
            
            if (typeof chrome.runtime === 'undefined') {
                log('❌ Chrome runtime API不可用', 'error');
                return false;
            }
            
            log('✅ Chrome runtime API可用');
            
            if (typeof chrome.runtime.sendMessage === 'undefined') {
                log('❌ Chrome runtime.sendMessage不可用', 'error');
                return false;
            }
            
            log('✅ Chrome runtime.sendMessage可用');
            return true;
        }
        
        // 测试消息发送
        function testMessageSending() {
            log('测试消息发送到background...');
            
            chrome.runtime.sendMessage({action: 'ping'}, (response) => {
                if (chrome.runtime.lastError) {
                    log(`❌ 消息发送失败: ${chrome.runtime.lastError.message}`, 'error');
                } else if (response && response.success) {
                    log('✅ 消息发送成功，background响应正常');
                } else {
                    log('⚠️ 消息发送成功，但background响应异常', 'error');
                }
            });
        }
        
        // 测试数据库操作
        function testDatabase() {
            log('测试数据库操作...');
            
            if (typeof window.db === 'undefined') {
                log('❌ window.db对象未定义', 'error');
                return;
            }
            
            log('✅ window.db对象已定义');
            
            // 测试get方法
            window.db.get('test').then((doc) => {
                log('✅ db.get()方法工作正常');
            }).catch((error) => {
                log(`❌ db.get()方法失败: ${error}`, 'error');
            });
        }
        
        // 检查Vue.js
        function checkVue() {
            log('检查Vue.js...');
            
            if (typeof Vue === 'undefined') {
                log('❌ Vue.js未加载', 'error');
                return false;
            }
            
            log('✅ Vue.js已加载');
            return true;
        }
        
        // 运行所有检查
        function runAllChecks() {
            log('开始扩展程序调试检查...', 'success');
            
            if (checkChromeAPI()) {
                setTimeout(testMessageSending, 100);
                setTimeout(testDatabase, 200);
            }
            
            setTimeout(checkVue, 300);
            
            log('调试检查完成', 'success');
        }
        
        // 页面加载完成后运行检查
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', runAllChecks);
        } else {
            runAllChecks();
        }
    </script>
</body>
</html>